<template>
  <div class="card">
    <a-card>
      <a-row>
        <a-col span="24">
          <div>
            <p class="titleCard">
              <a-icon :type="icon" class="iconLeft" />
              {{ title }}
            </p>
            <div class="contents">
              <div class="desc">
                <a @click="handleDetail"
                  >{{ desc }}<span style="font-size:14px"> {{ unit }}</span>
                  </a
                >
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>
<script>
export default {
  props: [
    "title",
    "icon",
    "desc",
    "unit",
    "settled",
    "unSettled",
    "setData",
    "unSetData",
  ],
  methods: {
    handleDetail() {
      this.$emit("handleDetail");
    },
    handleRecord() {
      this.$emit("handleRecord");
    },
  },
};
</script>
<style lang="less" scoped>
.titleCard {
  font-size: 16px;
  font-weight: 600;
}
.iconleft {
  margin-right: 10px;
}
.desc {
  font-size: 18px;
  font-weight: 600;
  //   margin-left: 20px;
  a {
    color: #000;
  }
  a:hover {
    color: red;
  }
}
.contents {
  display: flex;
  margin-left: 0px;
}
.other {
  font-size: 16px;
  font-weight: 600;
  a {
    color: green;
    font-size: 16px;
  }
  a:hover {
    color: red;
  }
  div:first-of-type {
    color: green;
    margin-bottom: 12px;
  }
  div:nth-of-type(2) {
    color: red;
  }
  span {
    color: #000;
    font-size: 18px;
  }
  i {
    font-style: normal !important;
    color: #000;
    font-weight: 400;
    font-size: 12px;
  }
}
</style>

